<template>
    <div class="w-100 h-100">
        <div style="height: 80px; margin-top: 40px;">
            <tablleBar @submit-swich="swichTable" :list="['地下水潜水位', '城市热岛效应']"></tablleBar>
        </div>
        <div style="height: calc(100% - 80px)">
            <div id="sst2" style="width: 100%; height: 100%"></div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import * as echarts from "echarts";
import tablleBar from "@/components/project/tablleBar.vue";
import { useOptions } from "@/hook/useOptions";

const colorSingleList = [
    "rgba(184, 235, 143, 1)",
];

const jsonData: any = inject('jsonData')
const current = computed(() => {
    let data = [];
    try {
        data = jsonData.value.jsgl.sst2[activeItem.value];
    } catch (error) { }
    return data;
});
let myChart: any

watch(
    () => current.value,
    (val) => {
        if (val) {
            myChart.setOption({
                series: [
                    { data: val },
                ],
            });
        }
    }
);

const activeItem = ref(0)
const swichTable = (item: any) => {
    activeItem.value = item;
};
onMounted(() => {
    let option: any = {
        color: colorSingleList,
        tooltip: {
            show: true,
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
    borderColor: "transparent",
            backgroundColor: "rgba(28,64,81,0.7)",
            extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
            textStyle: {
          color: "white",
          fontSize: 20,
        },
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "5%",
            top: "14%",
            containLabel: true,
        },
        //你的代码
        xAxis: {
            type: "category",
            data: useOptions().year(),
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: "#667A8E",
                },
            },
            axisLabel: {
                textStyle: {
                  fontSize: 20,
                  color: "#667A8E",
                },
            },
            axisTick: {
                show: false,
            },
        },
        yAxis: [
            {
                name: 'm',
                type: "value",
                nameTextStyle: {
                    color: "#8994A3",
                    fontSize: 20,
                },
                axisLabel: {
                    fontSize: 20,
                    color: '#667A8E',
                    formatter: "{value}" + '',
                },
                splitLine: { // 配置分割线
                    show: true,
                    lineStyle: {
                        color: 'rgba(92, 225, 255, 0.5)', // 蓝色分割线
                        type: 'solid' // 实线
                    }
                }
            }

        ],
        series: [
            {
                name: "",
                type: "line",
                data: [],
                color: 'rgba(3, 230, 254, 1)',
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(184, 235, 143, 0.8)' // 颜色渐变起始颜色
                        }, {
                            offset: 0.3,
                            color: 'rgba(184, 235, 143, 0)' // 颜色渐变结束颜色
                        }])
                    }
                }

            }
        ]
    };



    myChart = echarts.init(document.getElementById("sst2") as HTMLElement);
    myChart.setOption(option)
});
</script>

<style></style>